<template>
  <div>
    <div class="bind" v-if="bindshow">
      <group title="绑定代理">
        <x-input title="代理账号" placeholder="请输入手机号" v-model="agentPhone"></x-input>
      </group>
      <agent-button class="btn" @btnClick="bindClick">绑定</agent-button>
    </div>
    <table-view :titles="titles" :dataSource="lists" :max-page="1"></table-view>
  </div>
</template>
<script>
import { Group, XInput, dateFormat } from "vux";
import AgentButton from "../../components/common/AgentButton.vue";
import TableView from "../../components/common/TableView.vue";
export default {
  data() {
    return {
      titles: [
        {
          key: "nickname",
          value: "名称"
        },
        {
          key: "mobile",
          value: "手机号"
        },
        {
          key: "bindingtime",
          value: "绑定时间"
        }
      ],
      lists: [],
      agentId: "",
      agentPhone: "",
      bindshow: false
    };
  },
  components: {
    Group,
    XInput,
    AgentButton,
    TableView
  },
  created() {
    this.fetch();
  },
  methods: {
    fetch() {
      this.apiService.user.bindagent().then(res => {
        if (res.data.parent) {
          res.data.parent.bindingtime = dateFormat(
            res.data.parent.bindingtime * 1000,
            "YYYY-MM-DD"
          );
          return this.lists.push(res.data.parent);
        }
        this.bindshow = true;
      });
    },
    bindClick() {
      let _this = this;
      this.apiService.user
        .checkbindingagent({
          mobile: this.agentPhone
        })
        .then(res => {
          this.$vux.confirm.show({
            title: "绑定代理",
            content: `你确定绑定${res.data.nickname}么？`,
            onConfirm() {
              _this.apiService.user
                .confrimbinding({
                  agentid: res.data.user_id
                })
                .then(res => {
                  _this.$vux.toast.text("绑定成功");
                  _this.bindshow = false;
                  _this.fetch();
                });
            }
          });
        });
    }
  }
};
</script>

<style scoped>
.btn {
  width: 80%;
}
</style>

